Beskrivelse

Implementerer produktsøk og søkeresultatside for Handlelappen, basert på Figma-designet og gruppens felles tema.

Implementert

• Søkeresultatside med React og TypeScript.
• GraphQL-integrasjon mot backend og PostgreSQL.
• Dynamisk produktsøk med produktnavn, merke, pris og enhetspris der dette finnes.
• Filtrering på flere kategorier og butikkjeder samtidig.
• Hierarkisk kategorifiltrering og dynamiske filtertall.
• Aktive filterbrikker og mulighet for å nullstille filtre.
• Sortering etter relevans, laveste pris og høyeste pris.
• Paginering med 20 produkter per side.
• Lagring av søk, filtre, sortering og sidetall i localStorage.
• Håndtering av lasting, feil og søk uten treff.
• Responsivt design for desktop, nettbrett og mobil, inkludert sammenleggbart filterpanel.
• Organisert CSS med egne seksjoner for komponenter og responsive tilpasninger.

Testing

• Backend: npm run build
• Frontend: npm run build
• Frontend: npm run lint
• Testet produktsøk, filtrering, sortering og paginering
• Testet lagring av filtre etter refresh
• Testet tomtilstand ved null treff
• Visuelt kontrollert mobilvisning på 320 og 390 px
• Visuelt kontrollert nettbrettvisning på 768 px

Backend har foreløpig ikke et eget lint-script.

Videre integrasjon

Følgende skal kobles sammen med resten av applikasjonen i samarbeid med gruppen:

• Navigasjon mellom startsiden og søkeresultatsiden.
• Integrasjon med den aktive handlelisten og funksjonaliteten «Legg på lappen».
• Eventuell videre finjustering av responsivt design etter felles testing.

Relatert issue

#37

Skjermbilder

Filtrering- og sorteringsmeny

Paginering

Tom tilstand

Mobilvisning på 390x844

Også responsiv for 320x768

Filtreringsmeny på mobil

Responsiv for nettbrett 768x1024